<template>
  <div class="figure">
    <h1 v-for="index of keyframes.thick" :key="index+'_h'" class="title_h1">
      <slot></slot>
    </h1>
    <!-- 占位标签 -->
    <h1 style="position:relative;visibility: hidden;">
      <slot></slot>
    </h1>
  </div>
</template>

<script>
export default {
  name: 'titleSweeper',
  // 阴影大小(默认10px),阴影颜色1-4,阴影颜色简写,颜色切换周期(默认10s),文字厚度(默认为10,计算时*2为实际厚度)
  props: ['shadow', 'color1', 'color2', 'color3', 'color4', 'tcolor', 'time', 'thick'],
  data() {
    return {
      keyframes: {
        border: '10px',
        borderColor1: 'red',
        borderColor2: 'orange',
        borderColor3: 'forestgreen',
        borderColor4: 'cyan',
        borderTime: '10s',
        thick: 10
      }
    }
  },
  created() {
    if (this.shadow) this.keyframes.border = this.shadow
    if (this.color1) this.keyframes.borderColor1 = this.color1
    if (this.color2) this.keyframes.borderColor2 = this.color2
    if (this.color3) this.keyframes.borderColor3 = this.color3
    else if (this.color1) this.keyframes.borderColor3 = this.color1
    if (this.color4) this.keyframes.borderColor4 = this.color4
    else if (this.color2) this.keyframes.borderColor4 = this.color2
    if (this.tcolor) {
      this.keyframes.borderColor1 = this.tcolor
      this.keyframes.borderColor2 = this.tcolor
      this.keyframes.borderColor3 = this.tcolor
      this.keyframes.borderColor4 = this.tcolor
    }
    if (this.time) this.keyframes.borderTime = this.time
    if (this.thick) this.keyframes.thick = this.thick
  },
  mounted() {
    let styleSheetList = document.styleSheets
    let glow = `
    @keyframes glow {
      0%,
      100% {
        text-shadow: 0 0 ${this.keyframes.border} ${this.keyframes.borderColor1};
      }

      25% {
        text-shadow: 0 0 ${this.keyframes.border} ${this.keyframes.borderColor2};
      }

      50% {
        text-shadow: 0 0 ${this.keyframes.border} ${this.keyframes.borderColor3};
      }

      75% {
        text-shadow: 0 0 ${this.keyframes.border} ${this.keyframes.borderColor4};
      }
    }`
    for (let i = 1; i < this.keyframes.thick; i++) {
      let child = 'h1:nth-child(' + (i + 1) + ') {transform: translateZ(' + i * 2 + 'px);}'
      styleSheetList[0].insertRule(child, 0)
    }
    styleSheetList[0].insertRule(glow, 0)
    styleSheetList[0].insertRule('.title_h1{animation: glow ' + this.keyframes.borderTime + ' ease-in-out infinite;}', 0)
  }
}
</script>

<style scoped lang="scss" scope>
.figure {
  animation: wobble 5s ease-in-out infinite;
  transform-origin: center center;
  transform-style: preserve-3d;
  text-align: center;
}

@keyframes wobble {
  0%,
  100% {
    transform: rotate3d(0, 1, 0, 20deg);
  }

  25% {
    transform: rotate3d(0, -1, 0, 20deg);
  }

  50% {
    transform: rotate3d(0, 1, 0, 20deg);
  }

  75% {
    transform: rotate3d(0, -1, 0, 20deg);
  }
}

h1 {
  width: 100%;
  line-height: 1.5;
  text-transform: uppercase;
  position: absolute;
  margin: 0;
  top: 0;
}
</style>
